<script lang="ts">
    import { useClassList } from "../utils/useClassList";
    import type { QRCodeProps } from "./QRCode";
    import QrCodeCanvas from "./QRCodeCanvas.svelte";
    const DEFAULT_BGCOLOR = "#FFFFFF";

    const { bgColor = DEFAULT_BGCOLOR, ...props }: QRCodeProps = $props();
    const classList = $derived(useClassList(props, "cm-qrcode"));
    const { ...rest } = props;
    delete rest["class"];
    let canvas: any;

    export const download = () => {
        canvas.download();
    };
</script>

<div class={classList} style={`background-color: ${bgColor}`}>
    <QrCodeCanvas {...rest} bind:this={canvas} />
</div>
